@import '~@styles/variable.scss';

.navbar {
  height: 100%;
  width: 240px;
  border-right: solid 1px #e6e6e6;
  z-index: 999;
  &.has-logo {
    width: 60px;
  }
  .user-info {
    @include flex(center, center);
    @include padding-tb(10px, 10px);
    .text-center {
      text-align: center;
    }
    img {
      margin-top: 20px;
      margin-bottom: 10px;
      margin-right: 20px;
      width: 126px;
      height: 44px;
    }
  }
}

.el-menu.el-menu-vertical-demo {
  
  &:not(.el-menu--collapse) {
   
    height: 100%;
  }
  &.el-menu--collapse {
    .el-submenu {
      .el-submenu__title {
        span {
          height: 0;
          width: 0;
          overflow: hidden;
          visibility: hidden;
          display: inline-block;
        }
        .el-submenu__icon-arrow {
          visibility: hidden;
        }
      }
    }
  }
  border-right: none;
  background-color: transparent;
  a {
    text-decoration: none;
  }

  .el-menu-item {
    background-color: transparent;
    position: relative;
  }
  
  i {
    &:not(.el-submenu__icon-arrow) {
      position: absolute;
      top: calc(50% - 11px);
      left: 20px;
      display: inline-block;
      width: 16px;
      height: 20px;
      margin-right: 10px;
    }

    &.home_icon {
      background: url('~@images/home_icon.png') no-repeat;
    }

    &.workbench {
      background: url('~@icons/workbench.png') no-repeat;
    }

    &.order {
      background: url('~@icons/order.png') no-repeat;
    }

    &.operation {
      background: url('~@icons/operation.png') no-repeat;
    }

    &.track {
      background: url('~@icons/track.png') no-repeat;
    }
    &.call-center {
      background: url('~@icons/call-center.png') no-repeat;
    }
    &.customer {
      background: url('~@icons/customer.png') no-repeat;
    }
    &.product {
      background: url('~@icons/product.png') no-repeat;
    }
    &.financial {
      background: url('~@icons/financial.png') no-repeat;
    }
    &.servicer {
      background: url('~@icons/servicer.png') no-repeat;
    }
    &.storage {
      background: url('~@icons/storage.png') no-repeat;
    }
    &.basic {
      background: url('~@icons/basic.png') no-repeat;
    }
    &.system {
      background: url('~@icons/system.png') no-repeat;
    }
    &.vehicle {
      background: url('~@icons/vehicle.png') no-repeat;
    }
    &.dispatching {
      background: url('~@icons/dispatching.png') no-repeat;
    }
    &.statistical {
      background: url('~@icons/statistical.png') no-repeat;
    }

    background-size: 100% !important;
  }
}
.el-submenu__title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  i {
    &.el-submenu__icon-arrow {
      color: $color-333;
    }
  }
}
.el-menu {
  .nest-menu {
    a {
      text-decoration: none;
    }
  }
}
